<template>
  <div class="numberSet">
    <header-nav :leftArrow="true" titelText="检查记录表编号设置"></header-nav>

    <div class="content">
      <div class="tip">可根据样例图进行记录表编号设置</div>
      <div class="model">
        <div class="title">样例图</div>
        <div class="box">
          <img src="../../assets/images/munberModel.png" alt="" />
        </div>
      </div>
      <div class="line10"></div>
      <div class="numberTitle">编号设置</div>
      <div class="textBox">
        <div>
          <span style="color: #ee0a24; margin-right: 2px">*</span>
          <span style="font-size: 20px">①</span>
        </div>
        <van-field
          v-model="form.shortName"
          required
          maxlength="8"
          placeholder="请输入消防救援机构名称"
          style="padding: 0 20px"
        />
      </div>
      <div class="textBox">
        <div>
          <span style="color: #ee0a24; margin-right: 2px">*</span>
          <span style="font-size: 20px">②</span>
        </div>
        <van-field
          v-model="form.charName"
          required
          maxlength="8"
          placeholder="请输入记录表字"
          style="padding: 0 20px"
        />
      </div>
      <div class="textBox">
        <div>
          <span style="color: #ee0a24; margin-right: 2px">*</span>
          <span style="font-size: 20px">③</span>
        </div>
        <van-field
          v-model="form.numberName"
          required
          maxlength="8"
          placeholder="请输入记录表号"
          style="padding: 0 20px"
        />
      </div>
      <div class="submitBtn2">
        <van-button block type="primary" class="btn-left" @click="submit()">
          提交
        </van-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { showSuccessToast, showNotify, showFailToast } from 'vant'
const { useVision } = $globalStore
const router = useRouter()
const route = useRoute()
const id = ref(route.query.id)
const punishType = ref(route.query.punishType)
const form = reactive({
  id: id.value,
  punishType: punishType.value ? punishType.value : '',
  shortName: '', //简称
  charName: '', //表字
  numberName: '', //表号
})

const submit = async () => {
  if (form.shortName == '') {
    return showNotify({ type: 'danger', message: '请输入消防救援机构名称' })
  } else if (form.charName == '') {
    return showNotify({ type: 'danger', message: '请输入记录表字' })
  } else if (form.numberName == '') {
    return showNotify({ type: 'danger', message: '请输入记录表号' })
  }
  const res = await useVision.process(0, form)
  if (res.code == 0) {
    showSuccessToast('提交成功')
    router.push({ name: 'superviseList' })
  } else {
    showFailToast(res.message)
  }
}

// onMounted(async () => {
//   const res = await useVision.taskInfo(id.value)
//   if (res.code == 0) {
//     form.placePhotoUrl = res.data.photoList.join(',')
//     form.checkerSign = res.data.checkerSign
//     form.enterpriserSign = res.data.enterpriserSign
//     form.checkResult = res.data.checkResult
//     form.taskCheckFillList = []
//     if (res.data.taskCheckFillList.length > 0) {
//       res.data.taskCheckFillList.forEach((element) => {
//         let obj = {
//           id: element.id,
//           dangerDesc: element.dangerDesc,
//         }
//         form.taskCheckFillList.push(obj)
//       })
//     }
//   }
// })
</script>
<style lang="scss" scoped>
.numberSet {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  position: relative;
  .content {
    width: 100%;
    height: 100%;
    margin-top: 46px;

    .tip {
      padding: 11px 16px;
      background-color: rgba(254, 241, 230, 1);
      color: #fc770a;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 20px;
    }

    .model {
      padding: 16px;

      .title {
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 24px;
        color: #4d4d4d;
        margin-bottom: 8px;
      }

      .box {
        padding: 20px 0;
        border-radius: 4px;

        > img {
          width: 100%;
        }
      }
    }

    .numberTitle {
      padding: 16px;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0px;
      line-height: 24px;
      color: #2b2b2b;
      border-bottom: 1px solid #f0f0f0;
    }

    .textBox {
      display: flex;
      align-items: center;
      padding: 16px;
      border-bottom: 1px solid #f5f5f5;

      > div {
        line-height: 24px;
        font-size: 16px;
        color: #1764ce;
      }
    }
  }
}

.line10 {
  width: 100%;
  height: 10px;
  background-color: #f7f7f7;
}
</style>
